<template>
  <div class="xuan" ref="xz">
    <div
      v-for="item in xuan"
      :key="item.id"
      @mouseover="change(item.id)"
      @mouseout="change(item.id)"
      @click="onclick(item.text)"
      class="img"
    >
      <img v-show="item.isStatus" :src="item.qian" alt="" />
      <img v-show="!item.isStatus" :src="item.hou" alt="" />
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
const xuan = reactive([
  {
    id: 1,
    text: "汽车",
    qian: "/src/assets/images/che_nor.png",
    hou: "/src/assets/images/che_hov.png",
    isStatus: true,
  },
  {
    id: 2,
    text: "定位",
    qian: "/src/assets/images/dingwei_nor.png",
    hou: "/src/assets/images/dingwei_hov.png",
    isStatus: true,
  },
  {
    id: 3,
    text: "分析",
    qian: "/src/assets/images/fenxi_nor.png",
    hou: "/src/assets/images/fenxi_hov.png",
    isStatus: true,
  },
  {
    id: 4,
    text: "画像",
    qian: "/src/assets/images/huaxiang_nor.png",
    hou: "/src/assets/images/huaxiang_hov.png",
    isStatus: true,
  },
  {
    id: 5,
    text: "监控",
    qian: "/src/assets/images/jiankong_nor.png",
    hou: "/src/assets/images/jiankong_hov.png",
    isStatus: true,
  },
  {
    id: 6,
    text: "停车场",
    qian: "/src/assets/images/tingche_nor.png",
    hou: "/src/assets/images/tingche_hov.png",
    isStatus: true,
  },
]);
const xz = ref();
onMounted(() => {
  for (let i = 0; i < xz.value.children.length; i++) {
    xz.value.children[i].style["animation-delay"] = `${-5 - i * 3.3}s,-${i * 3.3}s,-${
      i * 3.3
    }s`;
  }
});
const change = (id) => {
  let obj = xuan.find((item) => item.id === id);
  obj.isStatus = !obj.isStatus;
  for (let a = 0; a < xz.value.children.length; a++) {
    xz.value.children[a].style["animation-play-state"] = obj.isStatus
      ? "running"
      : "paused";
  }
};
const onclick = (text) => {
  alert(text);
};
</script>

<style lang="scss" scoped>
@keyframes moveX {
  0% {
    left: -100px;
  }

  100% {
    left: 80%;
  }
}
@keyframes moveY {
  0% {
    top: 0px;
  }

  100% {
    top: 60%;
  }
}
@keyframes moveScale {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
.xuan {
  width: 100%;
  height: 100%;
  margin-top: 80px;
  color: white;
  position: relative;
  height: 500px;
  margin-left: 80px;
  .img {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    animation-name: moveX, moveY, moveScale;
    animation-duration: 10s, 10s, 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.36, 0, 0.6, 1);
  }
}
</style>
